<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>订单详情</span>
      </div>
      <el-form
        ref="orderForm"
        :model="orderForm"
        :rules="formRule"
        label-position="right"
        label-width="120px"
        style="width:100%;flex-wrap:wrap"
        class="flex"
      >
        <el-form-item label="订单号"
                      prop="order_id"
                      style="width:30%">
          <el-input v-model="orderForm.orderNum"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="订单时间"
                      prop="add_time"
                      style="width:30%">
          <el-input v-model="orderForm.addTime"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="订单状态"
                      prop="status"
                      style="width:30%;">
          <el-input v-model="orderForm.status"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

       <el-form-item label="付款方式"
                      prop="payType"
                      style="width:30%;">
          <el-input v-model="orderForm.payType"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        
       <el-form-item label="订单金额"
                      prop="totalPrice"
                      style="width:30%;">
          <el-input v-model="orderForm.totalPrice"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="购买账号"
                      prop="shopUserAccount"
                      style="width:30%;">
          <el-input v-model="orderForm.shopUserAccount"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="购买用户手机号"
                      prop="shopUserMobile"
                      style="width:30%;">
          <el-input v-model="orderForm.shopUserMobile"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="收货人姓名"
                      prop="realName"
                      style="width:30%;">
          <el-input v-model="orderForm.realName"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话"
                      prop="userPhone"
                      style="width:30%;">
          <el-input v-model="orderForm.userPhone"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
       
        <el-form-item label="收货地址"
                      prop="userAddress"
                      style="width:30%;">
          <el-input v-model="orderForm.userAddress"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="productListData" style="width: 100%" height="400" stripe>
        <el-table-column prop="productCode" label="制造商料号" align="center"></el-table-column>
        <el-table-column prop="aksCode" label="AKS料号" align="center"></el-table-column>
        <el-table-column prop="menuName" label="供应商" align="center"></el-table-column>
        <el-table-column prop="sonStatus" label="商品状态" align="center"></el-table-column>
        <el-table-column prop="buyNum" label="购买数量" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>
        <el-table-column prop="totalMoney" label="总金额" align="center"></el-table-column>
        <el-table-column prop="logisticsCompany" label="物流公司" align="center"></el-table-column>
        <el-table-column prop="logistics" label="物流单号" align="center"></el-table-column>
      </el-table>
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>是否确认订单</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="agreeOrder">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="提示"
          :visible.sync="redialogVisible"
          width="30%"
          :before-close="rehandleClose">
          <span>是否打回订单</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="redialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="refuseOrder">确 定</el-button>
          </span>
        </el-dialog>
      <el-pagination
        style="text-align:center;margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!--<div class="flex" style="justify-content:center;margin:15px 0" v-show="orderForm.paid==0" >
        <el-button type="primary" size="medium" v-if="isDisabled"  @click="dialogVisible = true">确认订单</el-button>
        <el-button type="danger" size="medium" style="margin-left:50px"  @click="redialogVisible = true" v-if="isDisabled">打回订单</el-button>
      </div>-->
    </el-card>
  </div>
</template>

<script>
import {
  ORDER_CART_LIST,ORDER_PRODUCT_LIST,
  ORDER_AGREE,ORDER_REFUSE
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
import axios from 'axios'
export default {
  data() {
    return {
      mainId:null,
      dialogVisible: false,
      redialogVisible:false,
      orderForm: {},
      formRule: {},
      tableData: [
        // {
        //   AKSNo: "asda112312",
        //   producerNo: "123143424234",
        //   price: "1",
        //   unit: "件",
        //   puchaseQty: 500
        // }
      ],
      productListData:[],
      payOptions: [{value: "0",
          label: "未支付"},
        {value: "1",
          label: "已支付"},
        {value: "3",
          label: "线下处理"}],
      payMethods: [{value: "0",
          label: "银行卡"},
        {value: "1",
          label: "线下支付"}],
      orderOptions: [
        {value: "0",
          label: "未打回"},
        {value: "1",
          label: "已打回"},
        {value: "2",
          label: "未确认"}],
      isDisabled: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  mounted() {
    if (this.$route.query["data"]) {
      this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
      this.orderForm = this.$route.query["data"];
      console.log("支付方式",this.orderForm.payType)
      console.log('==>'+JSON.stringify(this.orderForm))
      this.mainId=this.orderForm.id
      
      this.getOrderList()
    }
  },
  methods: {
    rehandleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    refuseOrder(){
      ORDER_REFUSE({ 
          orderNum:this.orderForm.orderId,
      }).then(res => {
          this.$message.success('打回操作成功')
          this.getOrderList()
          this.redialogVisible=false
      })
    },
    agreeOrder(){
      ORDER_AGREE({ 
          orderNum:this.orderForm.orderId,
      }).then(res => {
          this.$message.success('同意操作成功')
          this.getOrderList()
          this.dialogVisible=false
      })
    },
    getOrderList(){
     
      ORDER_PRODUCT_LIST({ 
          mainId: this.mainId,
          pageNo:this.currentPage,
          pageSize:this.pageSize
      }).then(res => {
          this.productListData = res.data.dataList
          console.log("list",this.productListData)
          this.total = res.data.count
          for (let i in this.productListData) {
            this.productListData[i].addTime = this.formatSecond(this.productListData[i].addTime)
            //订单状态
            switch(this.productListData[i].sonStatus){
              case 0:
                this.productListData[i].sonStatus = "待付款"
                break
              case 1:
                this.productListData[i].sonStatus = "待收货"
                break;
              case 2:
                this.productListData[i].sonStatus = "待发货"
                break;
              case 3:
                this.productListData[i].sonStatus = "待评价"
                break;
              case 6:
                this.productListData[i].sonStatus = "已评价"
                break;
              case -1:
                this.productListData[i].sonStatus = "退换货订单"
                break;
              case 4:
                this.productListData[i].sonStatus = "已完成"
                break;
            }
            
          }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.getOrderList()
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>

<style lang="scss" scoped>
</style>